<template>
  <div class="table-container">
    <!-- 隐藏columns -->
    <div class="hidden-columns">
      <slot/>
    </div>

    <table>
      <thead>
      <tr>
        <th v-for="(item, idx) in headers" :key="idx">
          {{ item.label }}
        </th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item, idx) in data" :key="idx">
        <td v-for="(_, _i) in headers" :key="_i">
          {{ item[_.prop] }}
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'KTable',
  props: {
    data: Array,
    loading: Boolean,
  },
  data () {
    return {
      headers: []
    }
  },
  created () {
    this.$root.$on('k-table-add-header', (header) => {
      this.headers.push(header)
      console.log(header)
    })
  }
};
</script>

<style scoped lang="scss">
  .hidden-columns {
    display: none;
  }
  .table-container {
    padding: 20px;
    background: #fff;
  }
  table {
    width: 100%;
    th, td {
      text-align: left;
      font-weight: 100;
      font-size: 13px;
      padding: 10px;
    }
    th {
      font-weight: 400;
    }
    td {
      color: #333;
    }
  }
</style>
